<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
        <meta name="author" content="order by dede58.com"/>
		<title>搜索页面</title>
		<link rel="stylesheet" href="layui/css/layui.css">
	</head>
  <style>
  .div0{background-color:#393D49;height:870px;}
  .div1{float:left;height:800px;}
  .font1{height:60px;background-color:#393D49;padding-top:18px;}
  .font2{font-size:20px;color:white;}
  .div2{background-color:#d2d2d2;height:810px;float:left;}
  .div3{padding-top:0px;}
  .div4{padding-top:18px;padding-left:150px;}
 
  .img1{float:left;}
  </style>
	<body>
	<div class="layui-container">
	<div class="div0 layui-row layui-col-space10">
	<div class="font1 layui-col-md12 layui-col-lg12">
	
		<div class="layui-row layui-col-space10">
		  <div class="layui-col-md4 font2">
		    工商图书馆
		  </div>
		  <div class="layui-col-md4">
		   	
		   	<form class="layui-form" action="selectBook.action">
			   	<div class="layui-form-item">
					<label class="layui-form-label div3">
						<button class="layui-btn">点击搜索</button>
					</label>
					<div class="layui-input-block">
					    <input type="text" name="link" required  lay-verify="required" placeholder="输入搜索图书" autocomplete="off" class="layui-input">
					</div>
				</div>
		   	</form>
		  </div>
		  <div class="layui-col-md4 div4">
		    <span class="layui-breadcrumb">
			  <a href="./register.jsp">注册</a>
			  <a href="./login.jsp">登录</a>
			  <a href="">消息通知</a>
			</span>
			</div>
		</div>

	</div>
	
	<div class="div1 layui-col-md2 layui-col-lg2">
	   <ul class="layui-nav layui-nav-tree ul1" lay-filter="test">
		<!-- 侧边导航: <ul class="layui-nav layui-nav-tree layui-nav-side"> -->
		  <li class="layui-nav-item layui-nav-itemed">
		    <a href="javascript:;" style="width:150px">文学类</a>
		    <dl class="layui-nav-child">
		      <dd><a href="javascript:;">选项1</a></dd>
		      <dd><a href="javascript:;">选项2</a></dd>
		      <dd><a href="">跳转</a></dd>
		    </dl>
		  </li>
		  <li class="layui-nav-item">
		    <a href="javascript:;" style="width:150px">理工类</a>
		    <dl class="layui-nav-child">
		      <dd><a href="">移动模块</a></dd>
		      <dd><a href="">后台模版</a></dd>
		      <dd><a href="">电商平台</a></dd>
		    </dl>
		  </li>
		  <li class="layui-nav-item"><a href="">产品</a></li>
		  <li class="layui-nav-item"><a href="">大数据</a></li>
		</ul>
	</div>
	 <div class="div2 layui-col-md10 layui-col-lg10"> 
	  
	  	<div class="layui-card">
		  <div class="layui-card-header ">搜索结果</div>
		</div>
	  	
	 	<div class="layui-card">
		  <div class="layui-card-body" style="height:200px;">
			  <div class="layui-col-md3 layui-col-lg3 img1">
			  	<img alt="" src="image/pinpai1.png" width="200px" height="200px">
			  </div>
			  <div class="layui-col-md9 layui-col-lg9">
			  <br>
			   <c:forEach var="fileList" items="${fileList}" varStatus="i"> 
			  	<table class="layui-table" lay-skin="line">
					  <tbody>
					  
					  	<tr>
					      <td>书名：《猫武士》</td>
					    </tr>
					    <tr>
					      <td>作者：林清炫</td>
					    </tr>
					    <tr>
					      <td>出版社：华文出版社</td>
					    </tr>
					    <tr>
					      <td>剩余数量：20本</td>
					    </tr>					   
					  
					  </tbody>
					</table>
					</c:forEach>
			  </div>			
		  </div>
		</div>
	 
	 	<div class="layui-card">
		  <div class="layui-card-body" style="height:200px;">
			  <div class="layui-col-md3 layui-col-lg3 img1">
			  	<img alt="" src="image/pinpai1.png" width="200px" height="200px">
			  </div>
			  <div class="layui-col-md9 layui-col-lg9">
			  	<br>
			  	<table class="layui-table" lay-skin="line">
					  <tbody>
					      <td>书名：《猫武士》</td>
					    </tr>
					    <tr>
					      <td>作者：林清炫</td>
					    </tr>
					    <tr>
					      <td>出版社：华文出版社</td>
					    </tr>
					    <tr>
					      <td>剩余数量：20本</td>
					    </tr>
					  </tbody>
					</table>
			  </div>			
		  </div>
		</div>
		
		<div class="layui-card">
		  <div class="layui-card-body" style="height:200px;">
			  <div class="layui-col-md3 layui-col-lg3 img1">
			  	<img alt="" src="image/pinpai1.png" width="200px" height="200px">
			  </div>
			  <div class="layui-col-md9 layui-col-lg9">
			  	<br>
			  	<table class="layui-table" lay-skin="line">
					  <tbody>
					      <td>书名：《猫武士》</td>
					    </tr>
					    <tr>
					      <td>作者：林清炫</td>
					    </tr>
					    <tr>
					      <td>出版社：华文出版社</td>
					    </tr>
					    <tr>
					      <td>剩余数量：20本</td>
					    </tr>
					  </tbody>
					</table>
			  </div>			
		  </div>
		</div>
	 
	 </div>
	
	</div>
	</div>
	
	
	<div style="text-align:center;">
	<br>
		<p>Copyright 2014 - Software Technology from <a href="http://www.yngsxy.net/" title="云南工商学院" target="_blank">云南工商学院</a></p> 
    </div> 
	<script src="layui/layui.js" charset="utf-8"></script>
	  <script>
			//Demo
		layui.use('form', function(){
		  var form = layui.form;
		  
		  //监听提交
		  form.on('submit(formDemo)', function(data){
		    layer.msg(JSON.stringify(data.field));
		    return false;
		  });
		});
		
		//注意：导航 依赖 element 模块，否则无法进行功能性操作
		layui.use('element', function(){
		  var element = layui.element;
		  
		  //…
		});
		
		layui.use('carousel', function(){
		  var carousel = layui.carousel;
		  //建造实例
		  carousel.render({
		    elem: '#test1'
		    ,width: '100%' //设置容器宽度
		    ,arrow: 'always' //始终显示箭头
		    //,anim: 'updown' //切换动画方式
		  });
		});
	  </script> 
	</body>
</html>